<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一隅立画登录</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<link rel="stylesheet" type="text/css" href="./css/basestyle.css" />
		<link rel="stylesheet" type="text/css" href="./css/login.css"/>
		<script src="js/base.js"></script>
	</head>
	<body>
		<div id="content">
			<div class="headmove">
				<div class="headone">
					<div class="headonewarp" @click="openmine">
						<img src="./images/back_icon.png">
					</div>
				</div>
				<div class="headtwo">
					<div class="headtwowarp">
						<img src="./images/logo.png">
					</div>
				</div>
			</div>
			<div id='sign' v-if='num == 1'>
				<div class='signnav'>
					<!-- 登录 -->
					<div class='signcontent' v-if='page == 1'>
						<div class='signcontentdown'>
							<div class='signcontentdownchoose'>
								<div class='signcontentdownchoosetitle'>
									<div class='signcontentdownchoitemosetitleitem' @click='type = 1' :class="{'signcontentdownshow' :type === 1}">
										<p v-show="languagestatus == 1">密码登录</p>
										<p v-show="languagestatus == 2">Password</p>
									</div>
									<div class='signcontentdownchoitemosetitleitem ' @click='type = 2' :class="{'signcontentdownshow' :type === 2}">
										<p v-show="languagestatus == 1">手机号验证码登录</p>
										<p v-show="languagestatus == 2">phone code</p>
									</div>
								</div>
								<div class='signcontentdownchooseipt' v-if='type == 1'>
									<div class='signcontentdownchooseiptitem'>
										<input v-model='loginphone' type='text' placeholder='请输入手机号' />
									</div>
									<div class='signcontentdownchooseiptitem'>
										<input v-model='loginpassword' type='password' placeholder='请输入密码' />
									</div>
								</div>
								<div class='signcontentdownchooseipt' v-else-if='type == 2'>
									<div class='signcontentdownchooseiptitem'>
										<input v-model='loginphonecode' type='text' placeholder='手机号' />
									</div>
									<div class=''>
										<p v-if='phonecodelogin == 1 &&languagestatus == 1'>手机号格式不正确</p>
										<p v-if='phonecodelogin == 1 &&languagestatus == 2'>Incorrect format of mobile phone number</p>
									</div>
									<div class='signcontentdownchooseiptitem checkCode'>
										<input v-model='logincode' type='text' placeholder='请输入验证码' />
										<div class='checkCodetxt'>
											<p v-if='logingetCode&&languagestatus == 1' @click='logingetcode'>获取验证码</p>
											<p v-if='logingetCode&&languagestatus == 2' @click='logingetcode'>Get verification code</p>
											<p v-else-if='!logingetCode'>{{logincount}}s</p>
										</div>
									</div>
								</div>
							</div>
							<div v-if='loginstatuscode == 1' class=''>
								<p v-show="languagestatus == 1">账号或密码错误</p>
								<p v-show="languagestatus == 2">Wrong account or password</p>
							</div>
							<div class='signcontentdownbtn' @click='headlogin'>
								<p v-show="languagestatus == 1">登录</p>
								<p v-show="languagestatus ==2">Sign in</p>
							</div>
							<div class='signcontentdownzhuce' @click='openzhuce'>
								<p v-show="languagestatus == 1">免费注册</p>
								<p v-show="languagestatus == 2">Free registration</p>
							</div>
						</div>
					</div>
					<!-- 注册 -->
					<div class='register' v-else-if='page == 2'>
						<div class='registerdown'>
							<div class='registerdowntxt'>
								<p v-show="languagestatus == 1">注册账号</p>
								<p v-show="languagestatus == 2">Registered account number</p>
							</div>
							<div class='registerdownipt'>
								<div class='registerdowniptnav'>
									<input v-model='zucephone' type='text' placeholder='请输入手机号' />
								</div>
								<div class=''>
									<p v-if='phonecode == 1&&languagestatus == 1'>手机号格式不正确</p>
									<p v-if='phonecode == 1&&languagestatus == 2'>Incorrect format of mobile phone number</p>
								</div>
								<div class='registerdowniptnav checkCode'>
									<input v-model='zhucecode' type='text' placeholder='请输入验证码' />
									<div class='checkCodetxt'>
										<p v-if='getCode&&languagestatus == 1' @click='pcGetCode'>获取验证码</p>
										<p v-if='getCode&&languagestatus == 2' @click='pcGetCode'>Get verification code</p>
										<p v-else-if='!getCode'>{{count}}s</p>
									</div>
								</div>
								<div class='registerdowniptnav'>
									<input v-model='zhucepassword' type='password' placeholder='请输入密码' />
								</div>
								<div class='registerdowniptnav'>
									<input v-model='zhucemakesurepassword' type='password' placeholder='请再次输入密码' />
								</div>
								<div class='registerdowniptnavtip'>
									<p v-if='password == 1&&languagestatus == 1'>两次输入密码不正确</p>
									<p v-else-if='password == 2&&languagestatus == 1'>密码不能为空或密码长度不能小于6位</p>
									<p v-else-if='password == 3&&languagestatus == 1'>密码不能以纯数字组成</p>
									<p v-if='password == 1&&languagestatus == 2'>Incorrect password input twice</p>
									<p v-else-if='password == 2&&languagestatus == 2'>The password cannot be empty or the length of password cannot be less than 6 digits</p>
									<p v-else-if='password == 3&&languagestatus == 2'>The password cannot be composed of pure numbers</p>
								</div>
							</div>
							<div class='registerdownbtn' @click='headzhuce'>
								<p v-show="languagestatus == 1">注册</p>
								<p v-show="languagestatus == 2">register</p>
							</div>
						</div>
					</div>
					<!-- 提示弹窗 -->
					<div class='judgepopup' v-show='tanchuang1 == 1'>
						<div class='judgepopupnav'>
							<div class='judgepopupwarp'>
								<div class='judgepopupwarpup'>
									<img src='./images/revoke_logo.png'>
								</div>
								<div class='judgepopupwarpdown'>
									<div class='judgepopupwarptxt'>
										<p v-show='tipcontent == 1&&languagestatus == 1'>正在注册</p>
										<p v-show='tipcontent == 2&&languagestatus == 1'>注册成功</p>
										<p v-show='tipcontent == 1&&languagestatus == 2'>Registering</p>
										<p v-show='tipcontent == 2&&languagestatus == 2'>login was successful</p>
									</div>
									<div class='judgepopupwarpbtn'>
										<div v-show="showbtn" class='judgepopupwarpbtnitem judgepopupwarpbtnactive' @click='closeagreement'>
											<p v-show="languagestatus == 1">确认</p>
											<p v-show="languagestatus == 2">confirm</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
		<!-- <script src="babel.min.js" type="text/javascript" charset="utf-8"></script> -->
		<script type="text/javascript">
			let content = new Vue({
				el:'#content',
				data:{
					page:1,
					num:1,
					openmine:1,
					closelogin:1,
					type: 1,
					phonecodelogin:0,
					logingetCode:true,
					loginstatuscode:0,
					loginphone:'',
					loginpassword:'',
					loginphonecode:'',
					logincode:'',
					count:'',
					logincount:'',
					loginnum:60,
					zucephone:'',
					zhucecode:'',
					zhucepassword:'',
					zhucemakesurepassword:'',
					phonecode:0,
					getCode:true,
					password:0,
					tanchuang1:0,
					tipcontent:1,
					showbtn:false,
					languagestatus:1
				},
				created() {
					if (sessionStorage.getItem('languagestatus')) {
						let languagestatus = sessionStorage.getItem('languagestatus')
						this.languagestatus = languagestatus
					}
					console.log(this.languagestatus)
				},
				mounted:function() {
					
				},
				methods:{
					headlogin: function() {
						// 账号登陆
						let that = this
						if (that.type == 1) {
								
							axios.post('http://admin.yiyulihua.com/api/sheji.login/login', {
									mobile: that.loginphone,
									password: that.loginpassword
								})
								.then((res) => {
									that.loginphone = ''
									that.loginpassword = ''
									console.log(res)
									if (res.data.code == 1) {
										that.num = 0
										that.loginstatus = 1;
										that.username = res.data.data.nickname
										let loginObj = new Object
										loginObj.userid = res.data.data.userid
										loginObj.token = res.data.data.token
										loginObj = JSON.stringify(loginObj)
										localStorage.setItem('logininfo', loginObj);
										let userObj = new Object
										userObj.nickname = res.data.data.nickname
										userObj.avatar = res.data.data.avatar
										userObj = JSON.stringify(userObj)
										localStorage.setItem('userinfo', userObj);
										window.location.href = 'index.html'
									} else if (res.data.code == 0) {
										that.loginstatuscode = 1
										setTimeout(function() {
											that.loginstatuscode = 0
										}, 1300)
									}
								})
						} else {
							// 手机号登陆
							axios.post('http://admin.yiyulihua.com/api/sheji.login/login', {
									mobile: that.loginphonecode,
									type: 1,
									code: that.logincode,
								})
								.then((res) => {
									console.log(res)
								})
						}
								
					},
					openzhuce:function(){
						let that = this
						that.page = 2
					},
					// 登录倒计时
					logingetcode: function() {
						let that = this
						let loginnum = 60
						// 倒计时
						let loginmyreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
						if (!loginmyreg.test(that.loginphonecode)) {
							that.phonecodelogin = 1
						} else {
							that.phonecodelogin = 0
							if (that.logingetCode) {
								// that.phonecode = 1
								that.logincount = loginnum
								that.logingetCode = false
								let timer = setInterval(() => {
									if (this.logincount > 0 && this.logincount <= loginnum) {
										that.logincount = that.logincount - 1
									} else {
										that.logingetCode = true
										clearInterval(timer);
									}
								}, 1000)
							}
							axios.get('http://admin.yiyulihua.com/api/sheji.login/sms', {
									params: {
										mobile: that.loginphonecode,
										type: 1,
									}
								})
								.then((res) => {
									console.log(res)
								})
						}
					},
					// 注册倒计时
					pcGetCode: function() {
						let that = this
						let num = 60
						// 倒计时
						let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
						if (!myreg.test(that.zucephone)) {
							that.phonecode = 1
						} else {
							that.phonecode = 0
							if (that.getCode) {
								// that.phonecode = 1
								that.count = num
								that.getCode = false
								let timer = setInterval(() => {
									if (this.count > 0 && this.count <= num) {
										that.count = that.count - 1
									} else {
										that.getCode = true
										clearInterval(timer);
									}
								}, 1000)
							}
							axios.get('http://admin.yiyulihua.com/api/sheji.login/sms', {
									params: {
										type: 0,
										mobile: that.zucephone
									}
								})
								.then((res) => {
									console.log(res)
								})
						}
					},
					// 注册
					headzhuce: function() {
						console.log(111)
						let that = this
						if (that.zhucepassword == '' || that.zhucepassword.length < 6) {
							that.password = 2
							console.log(that.password)
						} else if (/^[0-9]+$/.test(that.zhucepassword)) {
							that.password = 3
						} else if (that.zhucepassword !== that.zhucemakesurepassword) {
							that.password = 1
						} else {
							that.password = 0
							axios.post('http://admin.yiyulihua.com/api/sheji.login/register', {
									mobile: that.zucephone,
									code: that.zhucecode,
									type: 0,
									password: that.zhucepassword
								})
							.then((res) => {
								console.log(res)
								that.zucephone = ''
								that.zhucecode = ''
								that.zhucepassword = ''
								that.tipcontent = 1
								that.tanchuang1 = 1
								if (res.data.code == 1) {
									that.tipcontent = 2
									that.tanchuang1 = 1
								}
							})
						}
					},
					// 跳转
					closeagreement:function(){
						let that = this
						that.page = 1
					}
				}
			})
		</script>
	</body>
</html>
